<template>
  <el-row>
    <el-row class="title">基本信息</el-row>
    <el-row class="content">
      <el-row class="form-row">
        <el-col :span="6">姓名</el-col>
        <!-- <el-col :span="18" style="color: #909399">{{
          this.stuInfo.name
        }}</el-col> -->
        <el-col :span="18" style="color: #909399">
          {{ this.stuInfo.studentName }}
        </el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">当前头像</el-col>
        <el-col :span="18" class="button-div">
          <el-avatar shape="square" :size="100" :src="squareUrl"></el-avatar>
          <!-- <el-upload> -->
          <!-- <el-button type="primary" size="mini">上传</el-button> -->
          <!-- </el-upload> -->
        </el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">平台角色</el-col>
        <el-col :span="18" style="color: #909399">学生</el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">学号</el-col>
        <!-- <el-col :span="18" style="color: #909399">{{
          this.stuInfo.studentId
        }}</el-col> -->
        <el-col :span="18" style="color: #909399">{{
          this.stuInfo.studentId
        }}</el-col>
      </el-row>
    </el-row>
    <el-row class="title">绑定信息</el-row>
    <el-row class="content">
      <el-row class="form-row">
        <el-col :span="6">密码</el-col>
        <el-col :span="14"
          ><el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            :disabled="true"
          ></el-input
        ></el-col>
        <el-col :span="4"></el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">e-mail</el-col>
        <el-col :span="14"
          ><el-input
            placeholder="请输入e-mail地址"
            v-model="email"
            :disabled="true"
          ></el-input
        ></el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">电话号码</el-col>
        <el-col :span="14"
          ><el-input
            placeholder="请输入手机号"
            v-model="tele"
            :disabled="disabled"
          ></el-input
        ></el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6"><div></div></el-col>
        <el-col :span="18">
          <el-button
            size="mini"
            type="primary"
            plain
            class="fix-button"
            @click="change"
            >修改</el-button
          >
        </el-col>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import info from "../../store/index";
import stuInfo from "../../store/student";
import axios from "axios";
import qs from "qs";

export default {
  computed: {
    userInfo() {
      return info.getters.userInfo;
    },
    stuInfo() {
      return stuInfo.getters.getStuInfo;
    },
  },

  methods: {
    change() {
      // console.log(1);
      // console.log(this.tele);
      if (!this.disabled) {
        axios
          .post(
            "/api/setStudentTelephone",
            qs.stringify({
              authorizeToken: this.userInfo.authorizeToken,
              newTelephone: this.tele,
            })
          )
          .then((res) => {
            // console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.disabled = !this.disabled;
    },
  },
  data() {
    return {
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      password: "abc123456",
      tele: "",
      email: "",
      disabled: true,
    };
  },
  mounted() {
    this.tele = new String(this.stuInfo.telephone);
    this.email = new String(this.stuInfo.email);
  },
};
</script>

<style>
.form-row {
  padding: 15px 30px 10px;
}
.button-div {
  height: 100%;
  display: flex;
  flex-flow: column-reverse;
}
.title {
  padding: 10px;
}
.content {
  background-color: #ffffff;
  margin-bottom: 30px;
}
.fix-button {
  border: 5px;
  margin: 5px;
}
</style>
